<template>
	<u-popup :show="visible" mode="bottom" :closeOnClickOverlay='true' round="8rpx" closeable @close="hide">
		<view class="com-person-list">
			<view class="com-person-list__title">
				<text class="textHide-span">{{title}}</text>
				<text>({{items.length}})</text>
			</view>
			<view class="com-person-list__list">
				<view class="com-person-list__item" v-for="(item,index) in items" :key="index">
					<view class="com-person-list__item-head">
						<u-image width="96rpx" height="96rpx" radius="4rpx" :src="item.chatHead||defaultAvatar"></u-image>
					</view>
					<view class="com-person-list__item-content">
						<view class="com-person-list__item-name">
							<text class="textHide-1">{{item[nameField]}}</text>
							<text class="com-person-list__item-name-tag">{{item.onLine|chat-friend-status}}</text>
						</view>
						<view v-if="showMobile" class="com-person-list__item-phone">{{item.mobile||''}}</view>
					</view>
					<view v-if="showRemoveButton&&item.openId!==ownerOpenId" class="com-person-list__item-btn">
						<u-button :plain="true" color="#276AEE" loadingSize="28" :loading="item.loading" loadingText="正在删除"
							throttleTime="500" :customStyle="{
							'width': 'auto',
							'margin': '0',
							'font-size': '28rpx',
							'color': '#276AEE',
							'background-color': '#E9F0FD',
							'border': '0',
					}" @click="removeHandle(item,index)">移除</u-button>
					</view>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	import { defaultAvatar } from '@/config/staticConfig.js'

	export default {
		props: {
			title: {
				type: String,
				default: '人员列表'
			},
			// 显示移除按钮
			showRemoveButton: {
				type: Boolean,
				default: false
			},
			// 显示手机号
			showMobile: {
				type: Boolean,
				default: false
			},
			nameField: {
				type: String,
				default: 'nickname'
			}
		},
		data() {
			return {
				defaultAvatar,
				visible: false,
				openId: '',
				roomId: '',
				ownerOpenId: '',

				items: [],
			}
		},
		methods: {
			show(data) {
				this.visible = !this.visible
				this.openId = data.openId
				this.roomId = data.roomId
				this.ownerOpenId = data.ownerOpenId

				this.getRoomMembers()
			},
			hide() {
				this.visible = false
			},
			removeHandle(item, index) {
				// console.log(item);
				const that = this
				uni.showModal({
					title: '提示',
					content: `确定将 ${item[this.nameField]} 移出群聊`,
					success: async (e) => {
						if (e.confirm) {
							let params = {
								openId: that.openId,
								removeOpenId: item.openId,
								roomId: item.roomId
							}
							that.$set(item, 'loading', true)
							let res = await that.$api.removeRoomMember(params)
							if (res.success) {
								that.items.splice(index, 1)
								that.$set(item, 'loading', false)
							} else {
								uni.showToast({ title: res.message || '移除失败！', icon: 'none' })
								that.$set(item, 'loading', false)
							}
						} else if (e.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			//查询聊天室人员
			async getRoomMembers() {
				let params = {
					openId: this.openId,
					roomId: this.roomId
				}
				let res = await this.$api.goOnline(params)
				if (res.success) {
					this.items = res.result
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.com-person-list {
		max-height: 70vh;
		overflow-y: auto;

		::v-deep.u-popup__content__close {
			text {
				font-size: 32rpx !important;
				line-height: 108rpx !important;
			}
		}

		.com-person-list__title {
			height: 108rpx;
			padding: 32rpx;
			font-size: 32rpx;
			font-weight: 600;
			color: #1D2129;
			line-height: 44rpx;
			text-align: center;
			box-sizing: border-box;

			display: flex;
			justify-content: center;
			align-items: center;
		}

		.com-person-list__list {

			.com-person-list__item {
				padding: 20rpx 32rpx;

				display: flex;
				align-items: center;

				.com-person-list__item-head {}

				.com-person-list__item-content {
					margin-left: 16rpx;

					.com-person-list__item-name {
						font-size: 32rpx;
						font-weight: 600;
						color: #1D2129;
						line-height: 44rpx;

						display: flex;
						align-items: flex-end;

						&.off-line {
							color: red;
						}

						.com-person-list__item-name-tag {
							color: #ccc;
							margin-left: 10rpx;
							font-size: 20rpx;
							line-height: 32rpx;
						}
					}

					.com-person-list__item-phone {
						margin-top: 16rpx;
						font-size: 28rpx;
						color: #86909C;
						line-height: 40rpx;
					}
				}

				.com-person-list__item-btn {
					margin-left: auto;
					padding-left: 16rpx;
					flex: 0 0 auto,
				}
			}
		}
	}
</style>
